<template>
  <div class="error-page">
    <div class="error-container">
      <div class="error-image">
        <img src="@/assets/images/Amazon_logo.svg.webp" alt="Error Dog" />
      </div>
      <div class="error-content">
        <h1>{{ $t('找不到该网页') }}</h1>
        <p>
          <i class="fas fa-exclamation-triangle"></i>
          {{ $t('抱歉，您所访问的网页不存在。') }}
        </p>
        <div class="error-help">
          <h3>{{ $t('建议您') }}：</h3>
          <ul>
            <li>{{ $t('检查输入的网址是否正确') }}</li>
            <li>{{ $t('返回上一页面') }}</li>
            <li>{{ $t('访问优惠卷首页') }}</li>
          </ul>
        </div>
        <div class="error-actions">
          <router-link to="/" class="primary-button">
            {{ $t('返回首页') }}
          </router-link>
          <button class="secondary-button" @click="$router.go(-1)">
            {{ $t('返回上一页') }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 空的 setup 块
</script>

<style lang="scss" scoped>
.error-page {
  padding: 20px;
  margin: 20px auto;
  max-width: 1000px;
  min-height: calc(100vh - 200px);
}

.error-container {
  background: $bg-white;
  border-radius: 4px;
  padding: 20px 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.error-image {
  text-align: center;
  margin: 20px 0;

  img {
    max-width: 200px;
    height: auto;
  }
}

.error-content {
  h1 {
    color: $text-primary;
    font-size: 24px;
    margin-bottom: 16px;
  }

  p {
    color: $text-secondary;
    font-size: 14px;
    margin-bottom: 20px;

    i {
      color: #e47911;
      margin-right: 8px;
    }
  }
}

.error-help {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px 20px;
  margin: 20px 0;

  h3 {
    color: $text-primary;
    font-size: 16px;
    margin-bottom: 12px;
  }

  ul {
    list-style: disc;
    margin-left: 20px;

    li {
      color: $text-secondary;
      font-size: 14px;
      margin-bottom: 8px;
    }
  }
}

.error-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;

  .primary-button {
    padding: 8px 20px;
    background: linear-gradient(to bottom, #f7dfa5, #f0c14b);
    border: 1px solid #a88734;
    border-radius: 3px;
    color: #111;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      background: linear-gradient(to bottom, #f5d78e, #eeb933);
    }
  }

  .secondary-button {
    padding: 8px 20px;
    background: linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    border: 1px solid #adb1b8;
    border-radius: 3px;
    color: #111;
    font-size: 13px;
    cursor: pointer;

    &:hover {
      background: linear-gradient(to bottom, #e7eaf0, #d9dce1);
    }
  }
}
</style>
